<template>
  <div class="catePage">
    <div class="cateTop">
      <ul>
        <li
          v-for="(cate, ins) in catelist"
          :class="{ active: cate.idname == cates }"
          :key="ins"
        >
          <span @click="cateChoose(cate.idname)">{{ cate.idname }}</span>
        </li>
      </ul>
    </div>
    <div class="cityBox">
      <ul>
        <li class="active">
          <span @click="nation">
            {{ this.$store.state.city }}
            <i class="el-icon-caret-top" v-if="this.$store.state.cityShow"></i>
            <i class="el-icon-caret-bottom" v-else></i>
          </span>
        </li>
        <li>
          <span>全部时间</span>
        </li>
        <li>
          <span>默认排序</span>
        </li>
        <li>
          <span>距离最近</span>
        </li>
      </ul>
    </div>
    <div class="back">
      <span class="el-icon-s-home" @click="back">返回首页</span>
    </div>
    <transition>
      <!-- chooselocation城市选择模块 -->
      <choose-location
        class="location"
        v-if="this.$store.state.cityShow"
      ></choose-location>
    </transition>
    <div class="cateBtm">
      <section
        v-for="(category, ins) in categorys"
        :key="ins"
        @click="look(category.id)"
      >
        <img :src="category.verticalPic" alt />
        <div class="cateBtm-rig">
          <h1>{{ category.name }}</h1>
          <p>{{ category.address }}/{{ category.date }}</p>
          <span>￥{{ category.price }}</span>
        </div>
      </section>
      <section v-show="categorys.length==0">
          <div>
            <h1>暂无此类信息</h1>
          </div>
      </section>
    </div>
  </div>
</template>

<script>
import ChooseLocation from "./ChooseLocation";
export default {
  data: function () {
    return {
      catelist: [],
      cates: "",
      categorys: [],
    };
  },
  mounted() {
    this.cates = localStorage.cate;
    let val = localStorage.cate;
    if (val == "全部") {
      this.axios.get("/moreyc").then((res) => {
        this.categorys = res.data.result;
      });
    } else {
      this.axios.get("/every?cate=" + val).then((res) => {
        this.categorys = res.data.result;
      });
    }
    this.axios.get("/navlist").then((res) => {
      this.catelist = res.data.result;
      this.catelist.unshift({ idname: "全部" });
    });
  },
  methods: {
    cateChoose(val) {
      localStorage.setItem("cate", val);
      this.cates = localStorage.cate;
      if (val == "全部") {
        this.axios.get("/moreyc").then((res) => {
          this.categorys = res.data.result;
        });
      } else {
        this.axios.get("/every?cate=" + val).then((res) => {
          this.categorys = res.data.result;
        });
      }
      window.scrollTo(0, 0);
    },
    nation() {
      this.$store.commit("cityShow");
    },
    back() {
      location.href = "#/";
      window.scrollTo(0, 0);
    },
    look(val) {
      this.$store.commit("setId", val);
      location.href = "#/detail";
      window.scrollTo(0, 0);
    },
  },
  components: {
    ChooseLocation,
  },
};
</script>

<style scoped>
.catePage {
  position: relative;
}
/* 返回首页样式 */
.back {
  position: fixed;
  top: 100px;
  z-index: 4;
  width: 16px;
}
/* 展开城市 */
.catePage .location {
  position: fixed;
  top: -12px;
  z-index: 5;
  background-color: #fff;
}
.catePage .cateTop {
  width: 100%;
  overflow: scroll;
  padding: 10px 0;
  top: 0;
  position: fixed;
  z-index: 6;
  background-color: #fff;
  /*border-bottom:solid 1px #f0f0f0 ;*/
}
.catePage .cateTop ul {
  list-style: none;
  overflow: hidden;
  width: 650px;
  padding: 2px 0;
}
.catePage .cateTop ul li {
  float: left;
}
.catePage .cateTop ul li.active span {
  color: #ff1268;
  border-bottom: solid 2px #ff1268;
}

.catePage .cateTop ul li span {
  font-size: 18px;
  margin: 0 10px;
  border-bottom: solid 2px transparent;
}

.catePage .cityBox {
  width: 100%;
  top: 47px;
  padding: 10px 10px;
  background-color: #f5f5f5;
  position: fixed;
  z-index: 6;
}
.catePage .cityBox ul {
  list-style: none;
  overflow: hidden;
}
.catePage .cityBox ul li {
  float: left;
}
.catePage .cityBox ul li span {
  padding: 0 10px;
}
.catePage .cityBox ul li.active span {
  color: #ff1268;
}

.catePage .cateBtm {
  margin-top: 100px;
  padding: 0 20px 30px 20px;
}
.catePage .cateBtm section {
  overflow: hidden;
  margin-top: 20px;
}
.catePage .cateBtm section img {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.catePage .cateBtm section .cateBtm-rig {
  text-align: left;
  float: left;
  width: calc(100% - 130px);
}
.catePage .cateBtm section .cateBtm-rig h1 {
  font-size: 18px;
  text-align: left;
  margin-bottom: 10px;
  text-overflow: ellipsis; /*显示为省略号 */
  display: -webkit-box; /*对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: 2; /*显示行数## 标题文字 ## */
  overflow: hidden;

}
.catePage .cateBtm section .cateBtm-rig p {
  color: #888;
  font-size: 15px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 70px;
}
.catePage .cateBtm section .cateBtm-rig span {
  color: #ff1268;
  display: block;
  text-align: left;
  font-size: 18px;
}
</style>
